/* -----
   alert
   -----
   pop | line
   ----- */

$color-pop: (success, $color-green), (warn, $color-yellow);

.ui-alert-pop {
  padding: 8px 20px;
  display: inline-block;
  color: $color-white;
  font-size: $font-size-small;
  border-radius: $radius-mini;
  box-shadow: $shadow;

  @each $type, $color in $color-pop {
    &.alert-#{$type} {
      background: $color;
    }
  }
}

$color-system: (warn, $color-yellow, #fffaeb), (focus, $color-blue, #eaf5fe);

.ui-alert-line {
  padding: 6px 20px;
  border-width: 1px;
  border-style: solid;
  color: $color-text;
  font-size: $font-size-normal;
  line-height: 1.5;
  border-radius: $radius-mini;

  i {
    margin-right: 10px;
  }
  .text {
    overflow: hidden;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .option {
    float: right;
    display: inline;
  }

  @each $type, $color, $bg in $color-system {
    &.alert-#{$type} {
      border-color: $color;
      background: $bg;
    }
    i {
      color: $color;
    }
  }
}